<template>
	<div>
		<el-input v-model="searchform.telephoone" placeholder="请输入电话号码" style="width: 200px;">
			
		</el-input>
		<el-input v-model="searchform.username" placeholder="请输入名字" style="width: 100px;">
			
		</el-input>
		<el-button icon="el-icon-search" circle @click="queryData">
			
		</el-button>
		<el-button type="success" @click="resetSearchForm">重置</el-button>
		<el-button @click="addDept">添加</el-button>
		<el-dialog
		title="提示"
		:visible.sync="dialogVisible"
		width="30%"
		:before-close="handleClose">
		<span>
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="名字">
					<el-input v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-input v-model="form.status"></el-input>
				</el-form-item>
				<el-form-item label="电话号码">
					<el-input v-model="form.telephone"></el-input>
				</el-form-item>
				<el-form-item label="身份证号">
					<el-input v-model="from.idcard"></el-input>
				</el-form-item>
				<!-- <el-form-item label="地址">
							     <el-select v-model="form.loc" placeholder="请选择地址">
							       <el-option label="北京" value="北京"></el-option>
							       <el-option label="上海" value="上海"></el-option>
								    <el-option label="郑州" value="郑州"></el-option>
							     </el-select>
							   </el-form-item> -->
				<el-form-item>
					<el-button type="primary" @click="onsubmit">立即创建</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			</el-form>
		</span>
		 <!-- <span slot="footer" class="dialog-footer">
				    <el-button @click="dialogVisible = false">取 消</el-button>
				    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				  </span> -->
		</el-dialog>
		<el-table :data="tableData" style="width: 100%;" :row-class-name="tableRowClassName">
			<el-table-column prop="id" label="编号">
			</el-table-column>
			<el-table-column prop="username" label="名称">
			</el-table-column>
			<el-table-column prop="idcard" label="身份证号">
			</el-table-column>
			<el-table-column prop="telephone" label="电话号码">
			</el-table-column>
			<el-table-column prop="status" label="状态">
			  <template slot-scope="scope">
				  <el-switch @change="delUser(scope.row.id)"
				  v-model="scope.row.status"
				  active-color="#13ce66"
				  inactive-color="#ff4949"
				  :active-value="1"
				  :inactive-value="2">
				  </el-switch>
			  </template>
			</el-table-column>
			<el-table-column
			label="操作">
			  <template slot-scope="scope">
				  <el-button type="text" size="small" @click="updUser(scope.row)">修改</el-button>
				  <el-button @click="delUser(scope.row.id)" type="text" size="small">删除</el-button>
			  </template>
			</el-table-column>
		</el-table>
	</div>
</template>
<style>
	.el-table .warning-row{
		background: oldlace;
	}
	.el-table .success-row{
		background: #f0f9eb;
	}
</style>
<script>
	import qs from 'qs'
	export default{
		methods:{
			restSearchForm(){
				this.searchform={};
				this.queryData();
			},
			updUser(obj){
				// 1. 弹出框显示
				this.dialogVisible=true;
				// 2. 将选中的按钮的那一行的数据 填充到弹出框里面
								//this.form=obj; // 代表是一个浅拷贝
								// 深拷贝
				this.form=JSON.parse(JSON.stringify(obj));
			},
			tableRowClassName({
				row,
				rowinde
			}){
				if(rowinde %4 === 0){
					return 'warning-row';
				}else if(rowinde %4===2){
					return 'success-row';
				}
				return'';
			},
			queryData(){
				// 向后台发出请求 返回数据
				this.$axios.get("t-user",{params:this.searchform}).then(r=>{
					console.log(r.data.t)
					this.tableData = r.data.t;
				})
			},
			handleClose(done){
				this.$confirm('确认关闭?')
				.then(_=>{
					done();
				})
				.catch(_=>{});
			},
			addDept(){
				this.dialogVisible=true;
				
				this.form={};
			},
			onsubmit(){
				this.$axios.post("t-user",qs.stringify(this.form)).then(r=>{
					this.$message({
						showClose:true,
						message:r.data.msg,
						type:'success'
					});
					this.dialogVisible=false;
					
					this.queryData();
				})
			},
			delUser(id){
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
					confirmButtonText:'确定',
					cancelButtonText:'取消',
					type:'warning'
				}).then(()=>{
					this.$axios.delete("t-user/"+id).then(r=>{
						this.$message({
							showClose:true,
							type:'success',
							message:r.data.msg
						});
						this.queryData();
					})
				}).catch(()=>{
					this.$message({
						type:'info',
						message:'已取消删除'
					});
				});
			}
		},
		data(){
			return{
				tableData:[],
				dialogVisible:false,
				form:{},
				searchform:{username:"",telephone:""}
			}
		},
		created(){
			this.queryData();
		}
	}
</script>

<style>
</style>